<template>
	<div class="homelist">
		<header>
			<h2>{{proptitle}}</h2>
			<a href="#">更多</a>
		</header>
		<ul>
			<li  v-for="(item,index) in FilterList" :key="item.id">
				<router-link :to="`/mobile/bookDteail/${item.id}`"  v-if="(item.hot!=0 && index<6)||(item.price!=0&&index <9)">
					<img  :src="`http://127.0.0.1/api/public/showimg/${item.picture}`">
					<h3>{{item.name}}</h3>
					<span v-show="item.price != 0 ">￥{{item.price.toFixed(2)}}</span>
					<span v-show="item.hot != 0">热门{{item.hot}}</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'MobileHomeList',
		props:['proplist','proptitle'],
		data(){
			return{
				list:[]
			}
		},
		watch:{
			// 如果数据是请求获取,基本都需要监听props的数据,确保获取到的数据后在进行循环等
			proplist(){
				this.list = this.proplist;
				console.log(this.list);
			}
		},
		computed:{
			FilterList(){
				// 现在是假数据,不存在时差,直接赋值[后期发起请求后必须删除]
				this.list = this.proplist;
				// forEach()只做循环操作
				// map(()=>{return}) 是一个回调函数
				let filters=this.list.map((item)=>{
					return{
						id:item.id,
						name:item.memo?item.memo:item.name,
						picture:item.picture?item.picture:item.pic,
						price:!item.price?0:item.price,
						hot:item.hot?item.hot:0
					}
				});
				console.log(filters);
				filters.sort((a1,a2)=>{
					return this.proptitle=='热门推荐'?a2.hot-a1.hot:
							this.proptitle=="新书上市"?a2.id-a1.id:a1.id-a2.id;
				});
				return filters;
			}
		}
	}
</script>

<style scoped>
.homelist{
	width: 100%;
}
.homelist header{
	line-height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.homelist header h2{
	color: #a68b5b;
	font-size: 1rem;
	margin-left: 0.5rem;
}
.homelist header a{
	display: inline-block;
	width: 3rem;
	font-size: 0.8rem;
	color: #a68b5b;
}
.homelist ul{
	width: 96%;
	margin: 0 auto 4rem;
	display: flex;
	align-items: center;

	flex-wrap: wrap;
}
.homelist ul li {
	width: 46%;
	overflow: hidden;
	margin-left: 0.6rem;
	margin-bottom: 0.5rem;
	background-color: white;
	text-align: center;
	position: relative;
}
.homelist ul li img{
	width: 80%;
	height: 10rem;
	margin-top: 1rem;
}
.homelist ul li h3{
	width: 100%;
	height: 2.5rem;
	line-height: 2.5rem;
	font-size: 0.8rem;
	background-color: rgba(245,213 ,160, 0.5);
	color: #a68b5b;
	text-align: center;
	font-weight: normal;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	/*  */
	/* overflow: hidden; */
	/* text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; */
}
.homelist ul li span{
	font-size: 0.7rem;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top:0;
	right: 0;
	color: gold;
	padding: 0.4rem 0.3rem;
	/* 单独设置某个角为圆角 */
	border-radius: 0 0 0 0.6rem;
}
</style>
